<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>drop-shadow和clip-path生成规则阴影</title>
  <!--  <link rel="stylesheet" href="./styles/index.css">-->
</head>
<style>
  html,
  body {
    width: 100%;
    height: 100%;
    display: flex;
  }

  .btn-wrap {
    margin: auto;
    filter: drop-shadow(2px 4px 3px rgba(50, 50, 0, 0.5));
  }


  .btn{
    content: "";
    width: 200px;
    height: 64px;
    line-height: 64px;
    text-align: center;
    background: linear-gradient(#f5e5bf, #fbe8c8, #f5e5bf);
    color: #be9451;
    font-size: 24px;
    clip-path: polygon(10% 0%, 90% 0%, 100% 50%, 90% 100%, 10% 100%, 0 50%);
  // box-shadow: inset 0px 0px 1px 1px #fff;
  }
</style>
<body>
<div class="btn-wrap">
  <div class="btn">领取红包</div>
</div>
</body>
</html>
